<template>
	<!--  打赏-->
	<div class="live-reward-box">
		<div class="reward-btn" id="zhibo_dashang" @click="clickRewardBtn">
			<img src="@/assets/images/qrCode_v20220121.png" />
			<p>{{ rewardTitle }}</p>
		</div>
		<div class="reward-box" :class="classStyle" v-if="isRewardBox">
			<div class="reward-box-close" @click="rewardClose">
				<i aria-hidden="true" class="iconfont iconcha reward-box-close-i"></i>
			</div>
			<div class="reward-connect-box">
				<p class="reward-box-header">{{ rewardInfo.title || '' }}</p>
				<img :src="rewardInfo.img+ '?x-oss-process=image/resize,m_fixed,h_245,w_245'" />
				<p class="reward-box-tip">扫描上方二维码</p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		rewardInfo: Object,
	},
	data() {
		return {
			isRewardBox: false,
			rewardTitle: '',//打赏标题
			classStyle: ''
		}
	},
	created() {
		if (window.terminal.isZxjtqhApp) {
			this.classStyle = 'qhClass'
		}
	},
	mounted() {
		this.rewardTitle = this.maxText(this.rewardInfo.name)

	},
	methods: {
		//打赏二维码
		clickRewardBtn() {
			this.isRewardBox = true;
		},
		//打赏二维码关闭
		rewardClose() {
			this.isRewardBox = false;
		},
		// 打赏标题 zxxykzx超过两个显示省略号
		maxText(str) {
			if (!str) return ''
			if (this.$channel == 'zxxykzx' && str.length > 2) {
				return str.substring(0, 2) + '...'
			} else {
				return str
			}
		}
	},
}
</script>

<style scoped="scoped">
.qhClass {
	top: 70px !important;
	;
}

.reward-btn {
	padding: 10px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 21px;
	top: 207px;
	background: rgba(0, 0, 0, .5);
	border-radius: 20px;
	z-index: 507;
}

.reward-btn img {
	width: 21px;
	height: 21px;
}

.reward-btn p {
	font-size: 22px;
	font-weight: 400;
	color: rgba(246, 187, 65, 1);
	margin-left: 6px;
}

.reward-box {
	width: 286px;
	height: 369px;
	background: white;
	border-radius: 10px;
	position: fixed;
	top: 34px;
	left: 245px;
	z-index: 1005;
}

.reward-box-close {
	position: absolute;
	right: 8px;
	top: 2px;

}

.reward-box-close-i {
	font-size: 18px;
}

.reward-connect-box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.reward-connect-box .reward-box-header {
	font-size: 24px;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	margin-top: 40px;
}

.reward-connect-box img {
	width: 245px;
	height: 245px;
	margin: 10px 0 10px 0;
}

.reward-box-tip {
	font-size: 24px;
	font-weight: 400;
	color: #333333;
}
</style>